<!--
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2021-07-14 18:35:42
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-07-14 19:01:37
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 目标对象
    const user = {
      name: 'Jack',
      age: 20,
      wife: {
        name: 'rose',
        age: 18
      }
    }
    // 把目标对象变成代理对象
    /**
     * new Proxy(target, handler) 深度监视
     * user ---> 目标对象（target）
     * handler ---> 处理器对象，用来监视数据，及数据的操作
     */
    const proxyUser = new Proxy(user, {
      // 获取目标对象的属性值 
      // get(目标对象, 你要获取的值){
      get(target, prop){
        console.log('get方法调用了');
        return Reflect.get(target, prop)
      },
      // set()方法，不仅可以修改目标对象的属性值，而且可以为目标对象添加新的属性
      set(target, prop, val){
        console.log('set方法调用了');
        return Reflect.set(target, prop, val)
      },
      // 删除目标对象的属性值
      deleteProperty(target, prop){
        console.log('deleteProperty方法调用了');
        return Reflect.deleteProperty(target, prop)
      }
    })
    
    // 通过代理对象获取目标对象中的某个属性值
    console.log(proxyUser.name);
    proxyUser.name = '杰克'
    proxyUser.wife.name = '肉丝'
    proxyUser.gender = 'male'
    console.log(user);
    delete proxyUser.gender
    console.log(user);
  </script>
</body>
</html>